import { ref, onMounted, watch } from 'vue'

export default function useTodos() {
  const todos = ref([])

  const getTodos = () => {
    try {
      const todoLists = JSON.parse(localStorage.getItem('todoLists') || '[]')
      todos.value = todoLists || []
    } catch (error) {
      console.error('Failed to parse todoLists from localStorage:', error)
      todos.value = []
    }
  }

  const handleAddTodo = (todo) => {
    if (
      todo &&
      typeof todo === 'object' &&
      todo.id !== undefined &&
      todo.content !== undefined
    ) {
      todos.value.push(todo)
    } else {
      console.error('Invalid todo object:', todo)
    }
  }

  const handleToggle = (id, checked) => {
    const index = todos.value.findIndex((todo) => todo.id === id)
    if (index !== -1) {
      todos.value[index].done = checked
    } else {
      console.error('Todo with id', id, 'not found')
    }
  }

  const handleEdit = (id, content) => {
    const index = todos.value.findIndex((todo) => todo.id === id)
    if (index !== -1 && content !== undefined) {
      todos.value[index].content = content
    } else {
      console.error(
        'Todo with id',
        id,
        'not found or invalid content:',
        content
      )
    }
  }

  const handleDel = (id) => {
    const index = todos.value.findIndex((todo) => todo.id === id)
    if (index !== -1) {
      todos.value.splice(index, 1)
    } else {
      console.error('Todo with id', id, 'not found')
    }
  }

  const handleToggleAll = (checked) => {
    if (typeof checked === 'boolean') {
      todos.value.forEach((todo) => (todo.done = checked))
    } else {
      console.error('Invalid checked value:', checked)
    }
  }

  const handleClearDone = () => {
    todos.value = todos.value.filter((todo) => !todo.done)
  }

  const handleClearAll = () => {
    todos.value = []
  }

  watch(
    todos,
    () => {
      try {
        localStorage.setItem('todoLists', JSON.stringify(todos.value))
      } catch (error) {
        console.error('Failed to save todoLists to localStorage:', error)
      }
    },
    { deep: true }
  )

  onMounted(() => {
    getTodos()
  })

  return {
    todos,
    getTodos,
    handleAddTodo,
    handleToggle,
    handleEdit,
    handleDel,
    handleToggleAll,
    handleClearDone,
    handleClearAll,
  }
}
